<template>
  <view class="pageHeight bg_FFFFFF wh_750 flex flex-column align-center">
    <s-header-title ref="headerTitle" isDisplayBack title="添加亲友" is-fixed background="#F5F5F5"
                    @getPageHeight="getPageHeight"></s-header-title>
    <view :style="{height: page.headerHeight + 'px'}"></view>
    <view class="hW_20"></view>
    <view class="inputName flex align-center justify-between">
      <input v-model="page.familyNameValue"
             placeholder="请输入亲友的拾亲号或手机号"
             placeholder-class="inputName_placeholder"
             confirm-type="search" @confirm="confirm"
      ></input>
      <view class="fs_28 color_292929 fw_500"
            style="white-space: nowrap"
            @click.stop="confirm"
      >
        搜索
      </view>
    </view>
    <view class="hW_30"></view>
    <view class="list flex align-center justify-between" v-for="(item,index) in page.firendList" :key="index">
      <view class="ml_25 flex align-center">
        <image style="width: 58rpx;height: 58rpx;border-radius: 50%;overflow: hidden"
               :src="item.avatar.indexOf('http') != -1 ? item.avatar : `${nc_image}${item.avatar}`"
        ></image>
        <view class="ml_10">
          <view class="flex align-center">
            <view class="name">{{ item.surname }}{{ item.daimyo }}</view>
            <view class="remark ml_10 flex align-center justify-center" v-if="!!item.remark">
              {{ item.remark }}
            </view>
          </view>
          <view class="code">
            拾亲号：{{ item.uid }}
          </view>
        </view>
      </view>
      <view class="mr_25 right flex align-center justify-center" @click.stop="addFriend(item)">
        添加
      </view>
    </view>
    <view class="wh_750 flex flex-column  align-center " v-if="page.firendList.length <= 0">
      <view class="code flex align-center">
        <view>
          我的拾亲号: {{ userInfo.uid }}
        </view>
        <view class="flex align-center ml_15" @click.stop="setCilpText">
          <view style="color: #FF7950;">
            复制
          </view>
          <image class="ml_4" :src="`${IMG_URL}/index/replication.png`"></image>
        </view>
      </view>
      <view class="hW_30"></view>
      <view style="position:relative;width: 702rpx;padding: 46rpx 0 46rpx 0;border-radius: 20rpx;background: #FFFFFF;"
            class="flex align-center flex-column">
        <view class="right flex align-center justify-center z_5" style="position: absolute;right: 30rpx;bottom:10rpx;">
          扫一扫
        </view>
        <image style="width: 450rpx;height: 450rpx"
               :src="`${nc_image}/uploads/20241203/f40959110c9f442a04ebf785f9c19047.jpg`"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import SAvatar from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';

  const page = reactive({
    headerHeight: 0,
    familyNameValue: '',
    firendList: [],
  });
  // #ifdef H5
  const userInfo = computed(() => sheep.$store('user').userInfo);
  // #endif
  // #ifndef H5
  const userInfo = computed(() => JSON.parse(uni.getStorageSync('user-store')).userInfo);
  // #endif
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function confirm() {
    if (!page.familyNameValue) {
      sheep.$helper.toast('请输入亲友的拾亲号或手机号');
      return;
    }
    const { data } = await sheep.$api.user.searchFriend({
      searchContent: page.familyNameValue,
    });
    page.firendList = data;
  }

  async function addFriend(info) {
    const { code, msg } = await sheep.$api.user.addFriend({
      friend_id: info.uid,
    });
    if (code == 1) {
      sheep.$helper.toast(
        '添加成功',
      );
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      sheep.$helper.toast(
        msg,
      );
    }
  }

  function setCilpText() {
    uni.setClipboardData({
      data: userInfo.value.uid,
      showToast: true,
      success: () => {
        sheep.$helper.toast(
          '拾亲号已复制',
        );
      },
    });
  }
</script>


<style scoped lang="scss">
  .inputName {
    width: 702rpx;
    height: 80rpx;

    input {
      width: 620rpx;
      height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }

  .search {
    width: 702rpx;

    .left {
      width: 517rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }

    .right {
      width: 170rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #A0A0A0;
    }
  }

  .code {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #696969;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .searchs {
    width: 702rpx;
  }

  .list {
    width: 702rpx;
    height: 120rpx;
    background: #FFF8E8;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    .right {
      width: 130rpx;
      height: 48rpx;
      background: #FF4206;
      box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }

    .code {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 20rpx;
      color: #9F9F9F;
    }

    .name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }

    .remark {
      width: 66rpx;
      height: 30rpx;
      background: #6FA0FC;
      border-radius: 15rpx 15rpx 15rpx 15rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16rpx;
      color: #FFFFFF;
    }
  }
</style>
